<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" user-scalable=no>
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>矿机中心</title>
    <style>
        * {
    padding: 0px;
    margin: 0px;
    }
    img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    }
    .main {
    width: 100%;
    position: relative;
    font-family: PingFangSC-Regular;
    }
    .head {
    width: 100%;
    }
    .banner {
    width: 100%;
    background: #eeeff3;
    height: 500px;
    border-top-right-radius: 33px;
    border-top-left-radius: 33px;
    position: absolute;
    top: 239px;
    left: 0;
    overflow: hidden;
    }
    .middle {
        width: 94%;
        position: absolute;
        top: 211px;
        left: 6%;
    }
    .bannerItem {
    width: 91.7%;
    background: #ffffff;
    box-shadow: 0 2px 2px 0 rgba(225, 224, 229, 0.32);
    border-radius: 4px;
    overflow: hidden;
    }
    .bannerItemWallet {
    margin-top: 20px;
    }
    .bannerItemWallet img {
    width: 15px;
    height: 12px;
    float: left;
    margin-left: 9.4%;
    margin-top: 2px;
    }
    .bannerItemWords {
    font-size: 12px;
    color: #222222;
    letter-spacing: -0.05px;
    float: left;
    margin-left: 1.8%;
    vertical-align: middle;
    }
    .bannerItemWallet input {
    width: 59.5%;
    float: left;
    margin-left: 3.7%;
    border: none;
    font-size: 12px;
    color: #979797;
    letter-spacing: -0.05px;
    margin-top: 2px;
    }
    .sevice {
    width: 40px;
    height: 40px;
    position: absolute;
    top: -20px;
    right: 12.6%;
    z-index: 2;
    }
    .bannerItemZichan {
    font-size: 12px;
    color: #9898a2;
    letter-spacing: -0.05px;
    display: flex;
    justify-content: space-between;
    width: 81.6%;
    margin: 10px auto;
    margin-top: 45px;
    }
    .bannerItemZichan img {
    width: 15px;
    height: 15px;
    }
    .bannerItem_2_1 {
    display: flex;
    justify-content: space-between;
    width: 38%;
    }
    .bannerItemContent {
    width: 81.3%;
    margin: 0 auto;
    }
    .bannerItems {
    padding: 0 7.1% 0 7.1%;
    height: 31px;
    line-height: 31px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    background: #f0f1f5;
    }
    .bannerItems img {
    width: 11px;
    height: 11px;
    }
    .itemsName {
    font-size: 12px;
    color: #222222;
    letter-spacing: -0.05px;
    text-align: right;
    }
    .itemsNum {
    font-size: 12px;
    color: #979797;
    letter-spacing: -0.05px;
    }
    .bannerItems:last-child {
    margin-bottom: 20px;
    }
    .bannerItem_1 {
    width: 91.7%;
    background: #ffffff;
    box-shadow: 0 2px 2px 0 rgba(225, 224, 229, 0.32);
    border-radius: 4px;
    margin-top: 20px;
    text-align: left;
    }
    .tag {
    width: 82.1%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #222222;
    letter-spacing: -0.05px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f1f0f5;
    margin: 0 auto;
    }
    .feng {
    height: 40px;
    width: 82.1%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    color: #979797;
    letter-spacing: 0.36px;
    font-size: 14px;
    border-bottom: 1px solid #f1f0f5;
    line-height: 40px;
    }
    .feng span:first-child {
    color: #3760ed;
    width: 150px;
    }
    .feng span:nth-child(2) {
    width: 30px;
    }
    .feng span:nth-child(3) {
    width: 60px;
    }
    .feng:last-child {
    margin-bottom: 20px;
    }
    .tag span:nth-child(2) {
    width: 30px
    }
    .tag span:nth-child(1) {
    width: 150px}
    .tag span:nth-child(3) {
    width: 60px}
    .mainHide {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    outline: 0;
    -webkit-overflow-scrolling: touch;
    filter: alpha(opacity=60);
    z-index: 9;
    }
    .codeBox {
    width: 100%;
    height: 287px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 61px 0 54px 0;
    }
    .wordBox {
    width: 100%;
    text-align: center;
    }
    .wordBox p {
    font-size: 16px;
    color: #222222;
    letter-spacing: -0.07px;
    }
    .wordBo span {
    font-size: 14px;
    color: #979797;
    letter-spacing: -0.06px;
    text-align: right;
    }
    .com {
    margin: 0 auto;
    }
    .codeBox img {
    width: 63px;
    height: 63px;
      margin-top: -24px;
    }
    .qcodeBox {
    }
    .qcodeBox img {
    height: 150px;
    width: 148.6px;
      margin-top: 18px;
    }
    .codeBox {
    position: fixed;
    top:139px;
    }
    .close {
    width: 46.3px;
    height: 16.3px;
    position: fixed;
    top: 110px;
    left: 50%;
    margin-left: -23.15px;
    z-index: 999;
    }
    .button{
    background: #3962F2;
    border-radius: 2px;
    width: 151px;
    height: 42px;
    margin: 0 auto;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: -0.05px;
    line-height: 42px;
    text-align: center;
    }
    .hideWord{
        font-size: 12px;
    color: #95989F;
    letter-spacing: 0.55px;
    width: 59.5%;
    float: left;
    margin-left: 3.7%;
    font-size: 12px;
    color: #979797;
    letter-spacing: -0.05px;
    }
    </style>
</head>


<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./vue.min.js"></script>
    <script src='./set.js'></script>
    <div id="wrapp">
        <div class="main">
            <div class="head">
                <img src="./assets/Group 18@3x (1).png" alt="">
            </div>
            <div class="banner">
            </div>
            <div class="middle">
                <div class="bannerItem">
                    <div class="bannerItemWallet">
                        <img src="./assets/wallet.png" alt="">
                        <span class="bannerItemWords">ERC20地址</span>
                        <span type="text" class="hideWord">{{walletAddress | hideWord }}</span>
                    </div>
                    <img class="sevice" src="./assets/Group 3 Copy@3x.png" @click="sevice">
                    <div class="bannerItemZichan">
                        <span>挖矿收益</span>
                        <!-- <div class="bannerItem_2_1" @click="qrcode">
                            <img src="./assets/erweima.png" alt="">
                            <span>我的二维码</span>
                            <span>></span>
                        </div> -->
                    </div>
                    <div class="bannerItemContent">
                        <div class="bannerItems" @click="toCheckWalletSTORJ">
                            <div class="itemsCoin">
                                <img src="./assets/dot.png" alt="">
                                <span class="itemsName">STORJ</span>
                            </div>
                            <span class="itemsNum">{{mortgageData.storjsincome | keepThreeNum}}</span>
                        </div>
                        <!-- <div class="bannerItems" @click="toCheckWalletFIL"> -->
                        <div class="bannerItems">
                            <div class="itemsCoin">
                                <img src="./assets/dot.png" alt="">
                                <span class="itemsName">FILECOIN</span>
                            </div>
                            <span class="itemsNum">敬请期待</span>
                        </div>
                        <div class="bannerItems" @click="toCheckWalletPLC">
                            <div class="itemsCoin">
                                <img src="./assets/dot.png" alt="">
                                <span class="itemsName">PLC</span>
                            </div>
                            <span class="itemsNum">{{mortgageData.plcsincome | keepThreeNum}}</span>
                        </div>
                    </div>
                </div>
                <div class="bannerItem_1">
                    <div class="tag">
                        <span>设备ID</span>
                        <span>状态</span>
                        <span>地址</span>
                    </div>
                    <div class="feng" v-for="(feng,index) in fengData" @click="toCheckProperty(index)">
                        <span>{{feng.id | hideWord_1}}</span>
                        <span v-if="feng.status=='online'">在线</span>
                        <span v-else>离线</span>
                        <span>{{feng.position}}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="mainHide" v-show="isShow">
            <img src="./assets/up.png" alt="" class="close" @click="close">
            <div class="codeBox">
                <img src="./assets/zhushou.jpg" alt="" class="com">
                <div class="wordBox com">
                    <p>某某矿工</p>
                    <span>数字资产和挖矿设备管理</span>
                </div>
                <div class="qcodeBox com">
                    <img src="./assets/pinglianwang.jpg" alt="">
                </div>
                <div class="button" @click="save">保存二维码</div>
            </div>
        </div> -->
    </div>
    <script>
        let app = new Vue({
            el: "#wrapp",
            data: {
                walletAddress: "",

                fengData: [

                ],
                isShow: false,
                session: "",
                checkPropertyData: [],

                id: '',
                mortgageData: []
            },
            filters: {
                //字符串隐藏处理
                hideWord: function (string) {
                    let len = string.length;
                    let stringBefore = string.slice(0, 11);
                    let stringBeHand = string.slice(len - 10, len + 1);
                    let newString = stringBefore + "..." + stringBeHand;
                    return newString;
                },
                hideWord_1: function (string) {
                    let len = string.length;
                    let stringBefore = string.slice(0, 8);
                    let stringBeHand = string.slice(len - 8, len + 1);
                    let newString = stringBefore + "..." + stringBeHand;
                    return newString;
                },
                keepThreeNum: function (value) {
                    value = Number(value);
                    return value.toFixed(8);

                },
            },
            mounted() {
                this.loadData();
                this.getDiYa();
            },
            created() {
                this.session = this.parseURL().session;
                console.log(this.session);
            },
            methods: {
                //获取余额
                getDiYa() {
                    let param = {};
                    param["session"] = this.session;
                    axios({
                        method: "post",
                        url: requestBaseUrl + "tianru/users/subsidy",
                        data: param,
                    })
                        .then(res => {
                            if (res.status == 200) {
                                app.mortgageData = res.data.subsidy;
                                app.walletAddress = app.mortgageData.walletsub
                            }
                        })
                        .catch(err => {
                            // alert("网络连接错误");
                        });
                },
                //点击打开二维码界面
                qrcode() {
                    // this.isShow = true;
                },
                //点击关闭二维码页面
                close() {
                    this.isShow = false;
                    console.log(234344)
                },
                //点击保存二维码
                save() {
                    console.log(123);
                },
                //点击跳转客服页面
                sevice() {
                    window.location.href = appUrl + "contactUs.html?session=" + this.session;
                },
                //点击跳转查看资产
                toCheckProperty(index) {
                    window.location.href = appUrl + "checkProperty.html?session=" + this.session + "&id=" + this.fengData[index].id;
                },
                //点击跳转查看钱包
                toCheckWalletSTORJ() {
                    window.location.href = appUrl + "checkWalletAddress.html?session=" + this.session + "&wallet=" + this.walletAddress + "&coinName=" + "STORJ";
                },
                toCheckWalletFIL() {
                    window.location.href = appUrl + "checkWalletAddress.html?session=" + this.session + "&wallet=" + this.walletAddress + "&coinName=" + "FILECOIN";
                },
                toCheckWalletPLC() {
                    window.location.href = appUrl + "checkWalletAddress.html?session=" + this.session + "&wallet=" + this.walletAddress + "&coinName=" + "PLC";
                },
                //获取数据
                loadData() {
                    let param = {
                        "session" : this.session
                    };
                    axios.post(requestBaseUrl + "tianru/users/baseinfos",param,{"headers":{"Content-Type":"x-www-form-urlencoded"}})
                        .then(res => {
                            if (res.status == 200) {
                                if (res.data.retcode == 00000) {
                                    let baseData = res.data;
                                    app.fengData = baseData.miners;
                                    app.id = app.fengData[0].id;
                                } else if (res.data.retcode == 00006) {
                                    alert("session已过期，请重新登录");
                                    window.location.href="http://sky.valuechain.group/yunchao/login.html";
                                    console.log(res);
                                }
                            }
                        })
                        .catch(err => {
                            // alert("网络连接错误");
                        });
                },
                parseURL: function (_url) {
                    let queryString = '';
                    let url = _url || location.href;
                    let index = url.lastIndexOf('?');
                    let map = {};
                    /* 如果当前 url 没有 query-string*/
                    if (index > -1) {
                        let queryString = url.slice(index).split('?')[1];
                        queryString.split('&').forEach(function (item) {
                            let t = item.split('=');
                            map[t[0]] = t[1];
                        });
                    }
                    return map;
                },

            }
        })
    </script>
</body>

</html>